<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>EasySrv</title>
    <script>
      // 重命名 Electron 提供的 require
      window.nodeRequire = require;
      delete window.require;
      delete window.exports;
      delete window.module;
    </script>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="./res/bootstrap4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="./res/jquery3.4.1/jquery-3.4.1.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="./res/bootstrap4.3.1/js/bootstrap.min.js"></script>
    <style>
      body {
        padding: 5px;
        margin: 5px;
      }

      div {
        padding: 1px;
        border: 1px solid black;
        margin: 1px;
      }

      .srv-tab-content {
        height: 500px;
      }

      .srv-tab-conf-content {
        height: 360px;
      }

      .conf {
        margin-left: 10px;
      }
    </style>
  </head>

  <body>
    <div>



      <!-- 选项卡菜单-->
      <div>
        <ul id="myTabs" class="nav nav-pills" role="tablist">
          <li class="nav-item"><a class="nav-link active" href="#web-static" data-toggle="pill">http静态服务器</a></li>
          <li class="nav-item"><a class="nav-link" href="#ftps" data-toggle="pill">ftp服务器</a></li>
          <li class="nav-item"><a class="nav-link" href="#ftpc" data-toggle="pill">ftp客户端测试</a></li>
        </ul>
      </div>

      <hr class="simple" color="#6f5499" />

      <!-- 选项卡面板 -->
      <div id="myTabContent" class="tab-content">



        <!-- http静态服务器 -->
        <div id="web-static" class="srv-tab-content tab-pane active">

          <!-- http静态服务器选项卡 -->
          <div>
            <ul class="nav nav-tabs small">
              <li class="nav-item"><a class="nav-link active" href="#web-static-c0" data-toggle="tab">常规</a></li>
              <li class="nav-item"><a class="nav-link" href="#web-static-c1" data-toggle="tab">文档</a></li>
              <li class="nav-item"><a class="nav-link" href="#web-static-c2" data-toggle="tab">日志</a></li>
              <li class="nav-item"><a class="nav-link" href="#web-static-c3" data-toggle="tab">映射</a></li>
              <li class="nav-item"><a class="nav-link" href="#web-static-c4" data-toggle="tab">json配置模式</a></li>
            </ul>
          </div>

          <!-- http静态服务器选项卡内容begin -->
          <div class="tab-content">

            <!-- 常规 -->
            <div id="web-static-c0" class="srv-tab-conf-content tab-pane active">
              <form id="web-static-form1" action="##">
                <h6>服务器</h6>
                <span class="conf">目录：</span>
                <button id="web-static-root-bt">选择目录</button><input id="web-static-root" name="web-static-root" type="text" value="未选择" style="width: 400px"><br>
                <span class="conf">端口：</span>
                <input name="web-static-port" type="text" value="8081" style="width: 100px" /><br>
                <span>试试localhost:port/mmyyupload.html上传文件</span>
              </form>
            </div>

            <!-- 文档 -->
            <div id="web-static-c1" class="srv-tab-conf-content tab-pane fade">
              <form id="web-static-form2" action="##">
                <h6>缺省文档</h6>
                <span class="conf">缺省文件名：</span>
                <input name="plusDemo" type="text" style="width: 400px" value="index.html" />
                <h6>目录浏览</h6>
                <input class="conf" name="plusIndex" type="radio" value="0" checked />不展示目录<br>
                <input class="conf" name="plusIndex" type="radio" value="1" />当不存在缺省文档时展示目录<br>
                <input class="conf" name="plusIndex" type="radio" value="2" />总是展示目录
              </form>
            </div>

            <!-- 日志 -->
            <div id="web-static-c2" class="srv-tab-conf-content tab-pane fade">
              todo-log
            </div>

            <!-- 映射 -->
            <div id="web-static-c3" class="srv-tab-conf-content tab-pane fade">
              todo-使用netapp内网映射
            </div>

            <!-- json配置模式 -->
            <div id="web-static-c4" class="srv-tab-conf-content tab-pane fade">
              <textarea id="web-static-json" style="width: 100%; height:100%; resize: none">
                {
                  "port": 8081,
                  "root": "c:\\www\\dir",
                  "plusIndex": 0,
                  "plusDemo": "index.html"
                }
              </textarea>
            </div>

          </div>
          <!-- http静态服务器选项卡内容end -->


          <div>
            <p id="web-static-info">服务器未开启</p>
          </div>

          <div>
            <button type="button" id="begin-web-static">启动</button>
            <input type="checkbox" id="web-static-use-json" />json
          </div>

        </div>
        <!-- http静态服务器end -->




        <!-- ftp服务端begin -->
        <div id="ftps" class="srv-tab-content tab-pane fade">
          ftp服务器-内容面板
        </div>
        <!-- ftp服务端end -->




        <!-- ftp客户端begin -->
        <div id="ftpc" class="srv-tab-content tab-pane fade">

          <!-- ftp客户端选项卡 -->
          <div>
            <ul class="nav nav-tabs small">
              <li class="nav-item"><a class="nav-link active" href="#ftpc-c0" data-toggle="tab">配置</a></li>
              <li class="nav-item"><a class="nav-link" href="#ftpc-c1" data-toggle="tab">服务器文档</a></li>
            </ul>
          </div>

          <!-- ftp客户端选项卡内容begin -->
          <div class="tab-content">

            <!-- 配置 -->
            <div id="ftpc-c0" class="srv-tab-conf-content tab-pane active">
              <form action="##" id="ftpc-form1">
                <h6>服务器</h6>
                <span class="conf">host：</span>
                <input name="ftpc-host" type="text" value="127.0.0.1" style="width: 100px" /><br>
                <span class="conf">port：</span>
                <input name="ftpc-port" type="text" value="21" style="width: 100px" /><br>
                <span class="conf">user：</span>
                <input name="ftpc-user" type="text" value="" style="width: 100px" /><br>
                <span class="conf">port：</span>
                <input name="ftpc-pass" type="text" value="" style="width: 100px" /><br>
                <span>将采用被动方式连接ftp服务器</span>
              </form>
            </div>

            <!-- 服务器文档 -->
            <div id="ftpc-c1" class="srv-tab-conf-content tab-pane fade">
              服务器文档
            </div>

          </div>
          <!-- ftp客户端选项卡内容end -->


          <div>
            <p id="ftpc-info">服务器未连接</p>
          </div>

          <div>
            <button type="button" id="begin-ftpc">启动</button>
          </div>
        </div>
        <!-- ftp客户端end -->



      </div>
      <!-- 选项卡面板end -->


      <!-- footer -->
      <hr class="simple" color="#6f5499" />
      <div>
        <p>
          We are using node
          <script>document.write(process.versions.node)</script>,
          Chrome
          <script>document.write(process.versions.chrome)</script>,
          and Electron
          <script>document.write(process.versions.electron)</script>.
        </p>
      </div>


    </div>
  </body>

  <script>
    // 几种监听。可能哪里搞错了，这里如果open-directory-dialog，页面会刷新，所以注册函数放在最外面，不然页面刷新后，on事件都不存在了，即使消息回来了，也无法收到
    const { ipcRenderer } = nodeRequire('electron');
    ipcRenderer.on('begin-web-static-ok', (event, arg, b) => {
      $('#web-static-info').html(arg);
    });
    ipcRenderer.on('open-directory-dialog-ok', (event, files) => {
      console.log(files);
      if (files) {
        $('#web-static-root').val(files[0]);
      }
    });
    ipcRenderer.on('begin-ftpc-ok', (event, arg, b) => {
      $('#ftpc-info').html(arg);
    });
    ipcRenderer.on('ftpc-list-ok', (event, path, files) => {
      console.log(files);
      let str = `<h3>目录  ${path}  下的文件</h3>`;
      files.forEach(element => {
        str += `<a href='#'>${element}</a><br>`;
      });
      $('#ftpc-c1').html(str);
    });


    // 静态web服务：0-normal, 1-缺省时显示目录，2-总是显示目录
    $("#begin-web-static").click(() => {
      console.log("html begin-web-static");
      // tips
      $('#web-static-info').html("请稍等...(超出3秒，尝试直接查看localhost:port)");
      // 发送开启服务器消息
      if ($("#web-static-use-json").prop('checked')) {
        ipcRenderer.send('begin-web-static', $('#web-static-json').val());
      } else {
        const querystring = nodeRequire('querystring');
        let f1 = $("#web-static-form1").serialize();
        let f1q = querystring.parse(f1);
        let json = {
          root: f1q["web-static-root"],
          port: f1q["web-static-port"],
        }
        let f2 = $("#web-static-form2").serialize();
        let f2q = querystring.parse(f2);
        json.plusDemo = f2q["plusDemo"];
        json.plusIndex = parseInt(f2q["plusIndex"]);
        ipcRenderer.send('begin-web-static', JSON.stringify(json));
      }
    });
    // 静态web服务器选择目录
    $("#web-static-root-bt").click(() => {
      ipcRenderer.send('open-directory-dialog', 'openDirectory');
    });


    // ftp客户端连接服务器
    $("#begin-ftpc").click(() => {
      console.log("html begin-ftpc");
      // tips
      $('#ftpc-info').html("请稍等...");
      // 发送开启服务器消息
      const querystring = nodeRequire('querystring');
      let f1 = $("#ftpc-form1").serialize();
      let f1q = querystring.parse(f1);
      let json = {
        host: f1q["ftpc-host"],
        port: parseInt(f1q["ftpc-port"]),
        user: f1q["ftpc-user"],
        pass: f1q["ftpc-pass"],
      }
      console.log(json);
      ipcRenderer.send('begin-ftpc', JSON.stringify(json));
    });
  </script>

</html>